<script setup>
import useAuthStore from '@/store/auth'
import api from '@/api'
import { useRouter, useRoute } from 'vue-router'
import { showNotify } from 'vant'
import { ref } from 'vue'

const $authStore = useAuthStore()
const $router = useRouter()
const $route = useRoute()

const info = ref([])
const getInfo = async () => {
  try {
    const res = await api.get(`bannersDetails/${$route.params.id}`)
    var info0 = res.data
    info0.content = info0.content.replace(
      /<img/gi,
      "<img style='max-width: 100% !important;'"
    )
    info.value = info0
  } catch (error) {
    console.error(error)
  }
}

const onClickLeft = () => {
  $router.go(-1)
}

getInfo()
</script>

<template>
  <div>
    <van-nav-bar title="文章详情"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"> </van-nav-bar>
    <div class="page-profile">

      <div class="title">{{info.title}}</div>
      <div class="time">{{info.created_at}}</div>
      <div class="content"
           v-html="info.content"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-profile {
  box-sizing: border-box;
  padding: 10px 12px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.time {
  width: 100%;
  text-align: right;
  color: #a1a1a1;
  margin-bottom: 10px;
  font-size: 12px;
}

.content {
  width: 100%;
}
</style>
